<!-- 班级列表 -->
<template>
  <div class="classList-container">
    <BackgroundBox>
      <el-table v-if="props.classList.length" :data="props.classList" style="width: 100%;" v-loadings="props.isLoading" >
        <el-table-column prop="className" label="班级" :align="'center'"/>
        <el-table-column prop="classPeople" label="班级人数" :align="'center'" />
        <el-table-column label="所属宿舍" :align="'center'">
          <template #default="scope">
            <el-tree :data="scope.row.children" style="width: 100%" />
          </template>
        </el-table-column>
        <el-table-column label="操作" :align="'center'">
          <template #default="scope">
            <el-button
              :disabled="scope.row.children.length !== 0"
              type="primary"
              @click="handleEdit(scope.row)"
            >
              分配宿舍
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </BackgroundBox>
    <distribution :Unallocated="UnallocatedRef" :dialogTableVisible="dialogTableVisibleRef" @headlerClose="headlerClose" :selectedClassData="selectedClassDataRef"></distribution>
  </div>
</template>

<script setup>
import BackgroundBox from "@/components/BackgroundBox/index.vue";
import distribution from "./distribution.vue";
import {ref} from "vue"
import {getUnallocated} from "@/api/dormitoryInfo.js" 
const UnallocatedRef = ref() // 宿舍没被分配的信息
const dialogTableVisibleRef = ref(false) // 弹窗
const selectedClassDataRef = ref() // 选中的班级
const props = defineProps({
  classList: {
    type: Array,
    default: () => [],
  },
  isLoading:{
    type: Boolean,
    default: false
  }
});
// 打开弹窗
const handleEdit = async (value) =>{
  dialogTableVisibleRef.value = true
  const {data} = await getUnallocated();
  UnallocatedRef.value = data
  selectedClassDataRef.value = value;
}
const emit = defineEmits(["close"])
// 关闭弹窗
const headlerClose = ()=>{
  dialogTableVisibleRef.value = false
  emit("close")
}
</script>

<style lang="less" scoped>
.classList-container {
 
  .back-container {
    padding: 20px;
    min-height: 300px;
  }
  margin-bottom:80px;
}
</style>